'use client'

import React from 'react'
import { useRouter, usePathname } from 'next/navigation'
import { Breadcrumb as AntBreadcrumb } from 'antd'
import { HomeOutlined, FolderOutlined, FileTextOutlined } from '@ant-design/icons'
import { useUIStore } from '@/stores/uiStore'

interface LocalBreadcrumbItem {
    label: string
    path: string
    isActive: boolean
    icon?: React.ReactNode
}

interface BreadcrumbProps {
    className?: string
}

export function Breadcrumb({ className }: BreadcrumbProps) {
    const router = useRouter()
    const pathname = usePathname()
    const { navigation, updateBreadcrumbs } = useUIStore()

    // 根据当前路径生成面包屑
    const generateBreadcrumbs = React.useCallback((): LocalBreadcrumbItem[] => {
        const pathSegments = pathname.split('/').filter(Boolean)
        const breadcrumbs: LocalBreadcrumbItem[] = []

        // 首页
        breadcrumbs.push({
            label: '首页',
            path: '/',
            isActive: pathname === '/',
            icon: <HomeOutlined />
        })

        // 根据路径段生成面包屑
        if (pathSegments.length > 0) {
            let currentPath = ''

            pathSegments.forEach((segment, index) => {
                currentPath += `/${segment}`
                const isLast = index === pathSegments.length - 1

                if (segment === 'dataset' && pathSegments[index + 1]) {
                    // 数据集页面
                    const datasetId = pathSegments[index + 1]
                    breadcrumbs.push({
                        label: `数据集 ${datasetId}`,
                        path: `/dataset/${datasetId}`,
                        isActive: isLast || (index === pathSegments.length - 2),
                        icon: <FolderOutlined />
                    })
                } else if (segment === 'task' && pathSegments[index + 1] && pathSegments[index + 2]) {
                    // 任务页面
                    const datasetId = pathSegments[index + 1]
                    const taskId = pathSegments[index + 2]
                    breadcrumbs.push({
                        label: `任务 ${taskId}`,
                        path: `/task/${datasetId}/${taskId}`,
                        isActive: isLast,
                        icon: <FileTextOutlined />
                    })
                }
            })
        }

        return breadcrumbs
    }, [pathname])

    // 更新面包屑到store
    React.useEffect(() => {
        const breadcrumbs = generateBreadcrumbs()
        updateBreadcrumbs(breadcrumbs)
    }, [pathname, generateBreadcrumbs, updateBreadcrumbs])

    // 处理面包屑点击
    const handleBreadcrumbClick = (path: string) => {
        if (path !== pathname) {
            router.push(path)
        }
    }

    // 获取面包屑图标
    const getIcon = (path: string) => {
        if (path === '/') return <HomeOutlined />
        if (path.includes('/dataset/')) return <FolderOutlined />
        if (path.includes('/task/')) return <FileTextOutlined />
        return null
    }

    // 转换为Ant Design Breadcrumb格式
    const antBreadcrumbItems = navigation.breadcrumbs.map((item) => ({
        key: item.path,
        title: (
            <span
                className={`flex items-center gap-1 ${item.isActive
                    ? 'text-blue-600 font-medium'
                    : 'text-gray-600 hover:text-blue-500 cursor-pointer'
                    }`}
                onClick={() => !item.isActive && handleBreadcrumbClick(item.path)}
            >
                {getIcon(item.path)}
                {item.label}
            </span>
        )
    }))

    return (
        <div className={`breadcrumb-container ${className || ''}`}>
            <AntBreadcrumb
                items={antBreadcrumbItems}
                separator="/"
                className="text-sm"
            />
        </div>
    )
}